<template>
    <div class="home">
        <div class="top-bar flex-al-center flex_bet">
            <div class="flex-al-center">
                <img src="@/assets/logo1.png" alt="">
                <div class="nav-ul flex-al-center">
                    <div class="li flex-al-center pointer" v-for="(item, index) in navList" @click="goDetails(index)"
                        :class="{ active: index == selected }" :key="index"> {{ item }}

                    </div>
                </div>
            </div>

            <div class="login-out" @click="logOut">退出登录</div>
        </div>

        <div class="home-container">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive" />
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            psw: "",
            userName: "",
            remember: false,
            selected: 0,
            navList: [
                "港区百科",
                "自然资源分布图",
                "港区自然资源 禀赋特征",
                "港区自然资源 能源化评估",
                "港区自然资源能源化 组合策略评估",
                "自然资源禀赋能源化 适应性参数查询",

            ]
        }
    },
    watch: {
        $route: {
            handler(val, oldVal) {
                console.log(val)
                if (val.path.includes("wiki")) {
                    this.selected = 0
                } else if (val.path.includes("siteSelect")) {
                    this.selected = 1
                } else if (val.path.includes("naturalResQuery")) {
                    this.selected = 2
                } else if (val.path.includes("classifyQuery")) {
                    this.selected = 5
                } else if (val.path.includes("naturalResEstimate")) {
                    this.selected = 3
                } else if (val.path.includes("strategyEstimate")) {
                    this.selected = 4
                }
            },
            immediate: true
        }
    },
    created() {
        localStorage.getItem("remember") == "1"
            ? (this.remember = true)
            : (this.remember = false);
    },
    methods: {
        logOut(){
            this.$store.commit("loginOut")
        },
        rememberPsw(val) {

        },
        goDetails(index) {
            switch (index) {
                case 0:
                    this.$router.push("/home/wiki")
                    break;
                case 1:
                    this.$router.push("/home/siteSelect")
                    break;
                case 2:
                    this.$router.push("/home/naturalResQuery")
                    break;
                case 3:
                    this.$router.push("/home/naturalResEstimate")
                    break;
                case 4:
                    this.$router.push("/home/strategyEstimate")

                    break;
                case 5:
                    this.$router.push("/home/classifyQuery")
                    break;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.home-container {}

.top-bar {
    background: #2D57D2;
    padding: 20px 0 20px 20px;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 9.3vh;
    // opacity: 1;
}

.nav-ul {
    margin: 0 0 0 3.8vw;
    // width: 1300px;

    .li {
        // flex: 1;
        margin: 0 10px;
        height: 54px;
        padding: 0 12px;
        justify-content: center;
        // width: 139px;
        // box-sizing: border-box;
        font-size: 20px;
        // min-width: 130px;
        color: #FFFFFF;
        border: 0.13rem solid transparent;

        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4) {
            width: 140px;
        }

        &:nth-of-type(6),
        &:nth-of-type(5) {
            width: 180px;

        }

        &:nth-of-type(4) {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: 1px;
                background-color: #96ABE8;
                height: 54px;
                left: -30.84px;
            }
        }
    }

    .active {
        background: linear-gradient(180deg, #0269E7 0%, #022A7D 100%);
        border-radius: 6px 6px 6px 6px;
        border: 2px solid #199AEE;
    }
}

.login-out {
    margin: 0 40px 0 0;
    justify-content: center;
    font-size: 24px;
    padding: 8px;
    border-radius: 8px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    background-image: linear-gradient(#6182e5, #222222a4);
    cursor: pointer;
    text-align: center;
}
</style>
